<!-- 
ButtonOptions.vue
这是一个使用选项式API (Options API) 创建的按钮组件
选项式API的特点：
- 更接近传统的面向对象编程
- 代码组织按照 data、methods、computed 等选项分类
- 对 Vue 2 开发者更友好
- 适合小型组件
-->
<template>
  <button
    :class="['button-options', `button-options--${type}`, { 'button-options--disabled': disabled }]"
    :disabled="disabled"
    @click="handleClick"
  >
    <!-- 使用默认插槽允许自定义按钮内容 -->
    <slot>
      {{ text }}
    </slot>
  </button>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'

  export default defineComponent({
    // 组件名称
    name: 'ButtonOptions',

    // Props 定义
    props: {
      // 按钮文本
      text: {
        type: String,
        default: 'Button',
      },
      // 按钮类型：primary, secondary, danger
      type: {
        type: String,
        default: 'primary',
        validator: (value: string) => {
          return ['primary', 'secondary', 'danger'].includes(value)
        },
      },
      // 是否禁用
      disabled: {
        type: Boolean,
        default: false,
      },
    },

    // 自定义事件
    emits: ['click'],

    // 组件数据
    data() {
      return {
        clickCount: 0,
      }
    },

    // 计算属性
    computed: {
      buttonLabel(): string {
        return `${this.text} (点击次数: ${this.clickCount})`
      },
    },

    // 方法
    methods: {
      handleClick(event: MouseEvent): void {
        if (this.disabled) return

        this.clickCount++
        this.$emit('click', event)
      },
    },

    // 生命周期钩子
    mounted() {
      console.log('ButtonOptions 组件已挂载')
    },

    beforeUnmount() {
      console.log('ButtonOptions 组件即将卸载')
    },
  })
</script>

<style scoped>
  .button-options {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
  }

  .button-options--primary {
    background-color: #4caf50;
    color: white;
  }

  .button-options--primary:hover {
    background-color: #45a049;
  }

  .button-options--secondary {
    background-color: #2196f3;
    color: white;
  }

  .button-options--secondary:hover {
    background-color: #1e87db;
  }

  .button-options--danger {
    background-color: #f44336;
    color: white;
  }

  .button-options--danger:hover {
    background-color: #da190b;
  }

  .button-options--disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  .button-options--disabled:hover {
    opacity: 0.6;
  }
</style>
